<template>
  <div class="container">
    <el-card class="login-div">
      <el-image class="logo" src="https://blb-manage.oss-cn-wuhan-lr.aliyuncs.com/3d5b017e-4f44-4cff-8898-3ae2e640b9b3.svg"></el-image>
      <el-form
          size="large"
          ref="ruleFormRef"
          :rules="rules"
          :model="formData"
          :label-position="'top'"
      >
        <el-form-item prop="staffNo" label="用户名">
          <el-input clearable prefix-icon="User" placeholder="用户名" v-model="formData.staffNo"/>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input show-password clearable prefix-icon="Lock" placeholder="密码" @keyup.enter="submitForm(ruleFormRef)"
                    v-model="formData.password"/>
        </el-form-item>
        <el-form-item>
          <el-button class="login-btn" type="primary" @click="submitForm(ruleFormRef)">登 录</el-button>
        </el-form-item>
        <el-form-item>
          <el-text>武汉厚溥数字科技有限公司</el-text>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import {reactive, ref} from 'vue'
import {ElMessage} from 'element-plus'
import router from '@/router';
import axiosInstance from "@/axios/index.js";
import {useStaffStore} from "@/stores/staff.js";

const ruleFormRef = ref()

const formData = reactive({
  staffNo: 'ceshi',
  password: '222222',
})

const rules = reactive({
  staffNo: [{required: true, message: '请输入工号ID', trigger: 'blur',}],
  password: [{required: true, message: '请输入用户密码', trigger: 'blur',}],
})

const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      axiosInstance.post("/staff/login", formData).then(res => {
        if (res.data.code === 200) {
        localStorage.setItem("token", res.data.data);
        useStaffStore().getStaffInfo(formData.staffNo)
        ElMessage({
          message: '登录成功',
          type: 'success',
          duration: 500,
          onClose: function () {
            useStaffStore().staffInfo.staff.isFirstLogin === 1
                ? router.push("/staffInfo")
                : router.push("/index")
          }
        })
        }else {
          ElMessage({
            message: res.data.message,
            type: 'error',
          })
        }
      })
    } else {
      ElMessage({
        message: '不满足表单规则!请检查一下',
        type: 'error',
      })
    }
  })
}

</script>

<style scoped>
.container {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: linear-gradient(to right, #5356EF, #d368e5);
}

.login-div {
  width: 320px;
  background-color: white;
}

.login-btn {
  width: 100%;
  background: linear-gradient(to right, #3751FF, #d368e5);
  border: 0;
}

.logo {
  height: 40px;
  margin-bottom: 25px;
  margin-top: 15px;
  margin-left: 75px;
}

.el-form-item__label {
  color: #8c939d;
}

.el-form-item__content .el-text {
  color: #b7b7b7;
}
</style>

<style>
.el-form-item__content {
  justify-content: center !important;
  font-size: 14px;
}
</style>
